﻿
Vue.component("answer-item", {
    template: [`
    <el-radio-group v-if="model.QuestType=='2'" v-model="model.Value">
        <el-radio v-for="option in model.OptionList" :label="option.Value">{{option.Title}}
            <el-input v-if="option.IsOthers" v-model="option.OrthenValue" placeholder="请填写其他内容"></el-input>
        </el-radio>
    </el-radio-group>
    <el-checkbox-group v-else-if="model.QuestType=='3'" v-model="model.Value">
         <el-checkbox v-for="option in model.OptionList" :label="option.Value">{{option.Title}}
            <el-input v-if="option.IsOthers" v-model="option.OrthenValue" placeholder="请填写其他内容"></el-input>
         </el-checkbox>
    </el-checkbox-group>
    <el-input v-else-if="model.QuestType=='4' || model.QuestType=='0'" v-model="model.Value" placeholder=""></el-input>
    <el-input v-else-if="model.QuestType=='1'" v-model="model.Value" placeholder=""></el-input>
    <el-input v-else-if="model.QuestType=='5'" type="textarea" :rows="3" placeholder="" v-model="model.Value"></el-input>
    `].join(""),
    props: ["model"],
    data: function () {
        return {
        }
    },
    methods: {

    },
    computed: {
        // answerVa: function () {
        //     if (this.model.QuestType == 2) {
        //         var val = [];
        //         for (x in this.model.Answer) {
        //             val.push(this.model.Answer[x]);
        //         }
        //         return val;
        //     } else {
        //         if (this.model.Answer.length > 0) {
        //             return this.model.Answer[0].Value;
        //         } else {
        //             return "";
        //         }
        //     }
        // },
        // othenContent: function () {
        //     for (x in this.model.OptionList) {
        //         if (this.model.OptionList[x].IsOthers) {
        //             for (k in this.model.Answer) {
        //                 if (this.model.Answer[k].Value == this.model.OptionList[x].Value) {
        //                     return this.model.Answer[k].OthenContent;
        //                 }
        //             }
        //         }
        //     }
        // }
    },
    watch: {
        "answerVa": function (val) {
            debugger;
            answerValue.length = 0;
            if (val instanceof Array) {
                for (x in val) {
                    for (k in this.model.OptionList) {
                        if (this.model.OptionList[k].Value == val[x]) {
                            var temp = "";
                            for (j in this.model.Answer) {
                                if (this.model.Answer[j].Value == val[x]) {
                                    temp = this.model.Answer[j].OthenContent;
                                }
                            }
                            answerValue.push({
                                "Content": this.model.OptionList[k].Title,
                                "OthenContent": temp,
                                "Value": val[x]
                            })
                        }
                    }
                }
            }
        },
        "model.Value": function (val) {
            if (this.model.QuestType == '1') {
                this.model.Value = val.replace(/[^\d%]/g, "");
            }
        }
    }
});

var vm = new Vue({
    el: "#app",
    data: function () {
        return {
            "Ip": "",
            "AnswersTime": "1999-9-9",
            "PaperSerid": "套餐Id",
            "AnswerQuestion": [
                {
                    "QuestId": 1,
                    "QuestTitle": "我是单选按钮",
                    "QuestType": 2,
                    "Value": 1,
                    "IsNeed": true,
                    "Answer": [
                        {
                            "Content": "单选1号我有其他",
                            "OthenContent": "我是其他",
                            "Value": "1"
                        }
                    ],
                    "OptionList": [
                        {
                            "Id": 1,
                            "Value": 1,
                            "IsOthers": true,
                            "OrthenValue": "我是其他",
                            "Sort": 9,
                            "Title": "单选1号我有其他"
                        },
                        {
                            "Id": 2,
                            "Value": 2,
                            "IsOthers": false,
                            "OrthenValue": "",
                            "Sort": 8,
                            "Title": "单选2号"
                        },
                        {
                            "Id": 3,
                            "Value": 3,
                            "IsOthers": false,
                            "OrthenValue": "",
                            "Sort": 6,
                            "Title": "单选3号"
                        }
                    ]
                },
                {
                    "QuestId": 2,
                    "QuestTitle": "我是多选按钮",
                    "QuestType": 3,
                    "Value": [1],
                    "IsNeed": true,
                    "Answer": [
                        {
                            "Content": "多选1号我没其他",
                            "OthenContent": "",
                            "Value": "1"
                        },
                        {
                            "Content": "多选2号2我有其他",
                            "OthenContent": "哈哈哈哈哈,我是其他",
                            "Value": "2"
                        }
                    ],
                    "OptionList": [
                        {
                            "Id": 1,
                            "Value": 1,
                            "IsOthers": false,
                            "OrthenValue": "",
                            "Sort": 1,
                            "Title": "多选1号我没其他"
                        },
                        {
                            "Id": 2,
                            "Value": 2,
                            "IsOthers": true,
                            "OrthenValue": "哈哈哈哈哈,我是其他",
                            "Sort": 1,
                            "Title": "多选2号2我有其他"
                        },
                        {
                            "Id": 3,
                            "Value": 3,
                            "IsOthers": true,
                            "OrthenValue": "哈哈哈哈哈,我也是是其他",
                            "Sort": 1,
                            "Title": "多选3号"
                        }
                    ]
                },
                {
                    "QuestTitle": "我只是一个文本框",
                    "QuestId": 3,
                    "QuestType": 4,
                    "Value": "别修改我",
                    "IsNeed": true,
                    "Answer": [
                        {
                            "Value": "别修改我",
                            "Content": "我只是一个文本框",
                            "OthenContent": ""
                        }
                    ]
                },
                {
                    "QuestTitle": "我不仅一个文本框,还是多行的",
                    "QuestId": 4,
                    "QuestType": 5,
                    "Value": "我可是多行的",
                    "IsNeed": false,
                    "Answer": [
                        {
                            "Value": "我可是多行的",
                            "Content": "我不仅一个文本框,还是多行的",
                            "OthenContent": ""
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        onSubmit: function () {
            // 数据格式兼容
            $.each(vm.AnswerQuestion, function (ind) {
                if (this.QuestType == 3) {

                }
            });
            var obj = {
                AnswerRecords: vm.$data,
            }
            debugger;
            $.ajax({
                type: "post",  //提交类型
                url: "../QuetionEdit/AjaxCall.ashx?action=SaveAnswerRecords",  //提交地址
                data: JSON.stringify(obj),  //提交数据
                complete: function (date) {
                    this.$message('答卷提交成功,感谢!');
                }
            });
        },
        onClose: function () {

        }
    },
    ready: function () {
        that.Value.length = 0;
        $.each(this.AnswerQuestion, function () {
            if (this.QuestType == 3) {
                var that = this;
                $.each(this.Answer, function () {
                    that.Value.push(this.Value);
                });
            }
        })
        $.ajax({
            type: "post",  //提交类型
            url: "../QuetionEdit/AjaxCall.ashx?action=GetQuestionPaperInfo&serid=" + GetQueryString("serid"),  //提交地址
            data: JSON.stringify(obj),  //提交数据
            complete: function (date) {
                this.$message('答卷提交成功,感谢!');
            }
        });
    }
});


function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}


